<template>
	<div id='timeReportDetail'>
		<div class="title">{{title}}</div>
		<div class="content">
      <div class="chart-info">
        <Row>
          <i-col id="pieChart" class="chart" span="12"></i-col>
          <i-col class="table" span="12">
            <div class="info-header">Overtime Details</div>
            <table class="info-table">
              <tr>
                <td>Week</td> <td style="color:#FF8E50">OT(hrs)</td><td style="color:#009AFF">DT(hrs)</td>
              </tr>
              <tr>
                <td>{{formatWeekShow}}</td> <td style="color:#FC595D;font-size: 20px">{{infoData.overtime}}</td><td style="color:#009AFF;font-size: 20px">{{infoData.doubletime}}</td>
              </tr>
              <tr><td></td><td></td><td></td></tr>
              <tr><td></td><td></td><td></td></tr>
            </table>
          </i-col>
        </Row>
      </div>
      <!--list -->
      <div class="table-content">
        <div class="handle-content">
          <button v-touch-ripple  class="add-btn" @click="addModel=true"> + Add Timesheet</button>
        </div>
        <div class="table-header"><i class="iconfont left-icon" @click="toLeftWeek">&#xe617;</i>{{formatWeekShow}}<i class="iconfont right-icon" @click="toRightWeek">&#xe618;</i></div>
        <i-table class="table-panel" :columns="detailColumns" :data="detailList"></i-table>
      </div>
    </div>
    <Modal
      v-model="addModel"
      title="Add TimeSheet"
      ok-text = 'Save'
      cancel-text = 'Cancel'
      @on-ok="saveTimesheet"
      @on-cancel="cancelSaveTimesheet"
      width = 613
      class-name = 'addModal'>
      <Form class="addForm" :model="addFormModel" :label-width="140" label-position="left">
        <Form-item label="EMPLOYEE">
          <Input v-model="addFormModel.employee" ></Input>
        </Form-item>
        <Form-item label="TYPE">
          <Radio-group v-model="addFormModel.type">
            <Radio label="1" style="font-size: 14px;">Time In/Out</Radio>
            <Radio label="2" style="font-size: 14px">Duration</Radio>
          </Radio-group>
        </Form-item>
        <Form-item label="STATUS ">
          <Checkbox v-model="addFormModel.status" style="font-size: 14px;">Curently working</Checkbox>
        </Form-item>
        <Form-item label="TIME IN">
          <Row>
            <i-col span="10">
              <Date-picker type="date" placeholder="select Date"></Date-picker>
            </i-col>
            <i-col span="6" offset="1">
              <Input></Input>
            </i-col>
            <i-col span="6" offset="1">
              <Select v-model="addFormModel.AMPM">
                <Option value="1">am</Option>
                <Option value="2">pm</Option>
              </Select>
            </i-col>
          </Row>
        </Form-item>
        <Form-item label="TOTAL HOURS">
          <Input v-model="addFormModel.totalHours" style="width: 150px"></Input>
        </Form-item>
        <Form-item label="HOURS TYPE">
          <Input v-model="addFormModel.hoursType" ></Input>
        </Form-item>
        <Form-item label="TIME ZONE">
          <Select v-model="addFormModel.timeZone">
            <option>12</option>
            <option>12</option>
          </Select>
        </Form-item>
      </Form>
    </Modal>
	</div>
</template>

<script>
	export default {
		name: 'timeReportDetail',
    created(){
      this.init()
    },
    mounted(){

    },
    computed:{
      infoData(){
        return this.$store.getters.timeReportDetailInfo;
      },
      detailList(){
        return this.$store.getters.timeReportDetailList;
      },
      formatWeekShow(){
        this.getDetailInfo();
        this.getDetailList();
        return moment(this.beginDate).format('MMM D') + " - " + moment(this.endDate).format('MMM D')
      }
    },
    watch:{
      infoData(value){
      	var obj=[];
        for(var i in value){
        	obj.push({name:i,value:value[i]});
        }
        this.chartData = obj;
      },
      chartData(value){
      	this.pieChartOption.series[0].data = value;
        this.$nextTick(function () {
          this.setChart();
        })
      }
    },
		data () {
      var t = this;
			return {
				title: 'View Details',
        addModel:false,
        addFormModel:{
          type:'1'
        },//addTimeSheet Modal
        beginDate:null,
        endDate:null,
        employeeId:'',
        chartData:[],
        detailColumns:[
          {
          	title:'Date',
            key:'date',
            className:'detail-date-column',
            render(row,column,index){
              var className = '';
              if(t.detailList[index-1] && row.date != t.detailList[index-1].date){
                className ='line'
              }
              return `<span class="date-name ${className}">${row.date}</span>`
            }
          },
          {
            title:'day',
            key:'day'
          },
          {
            title:'In',
            key:'checkInTime'
          },
          {
            title:'Out',
            key:'checkOutTime'
          },
          {
            title:'Hours',
            key:'hours'
          },
          {
            title:'Day Total',
            key:'dayTotal'
          },
          {
            title:'Week Total',
            key:'weekTotal'
          },
          {
            title:'Hours Type',
            key:'hoursType'
          },
          {
            title:'Notes',
            key:'notes'
          }
        ],
        tableData:[],
        pieChartOption:{
            tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            title:{
              text:'64.13' ,
              textStyle:{
                fontSize:36,
                fontWeight:'normal',
                color:'#009AFF'
              },
              subtextStyle:{
                fontSize:14,
                fontWeight:'normal',
                color:'#009AFF'
              },
              textAlign:'center',
              subtext:'Total Hours',
              left:'49%',
              top:'40%'
            },
            color:['#FF8E50','#78D000','#FC595D','#009AFF'],
            series: [
              {
                name:'Report Detail',
                type:'pie',
                selectedMode: 'single',
                radius: ['52%', '68%'],
                label: {
                  normal: {
                    position: 'outside',
                    textStyle:{
                      fontSize:14
                    }
                  }
                },
                labelLine: {
                  normal: {
                    show: true,
                  }
                },
                data:[]
              },
            ]
          }
			}
		},
    methods:{
    	init(){
        this.beginDate = moment().startOf('week').format('YYYY-MM-DD'),
        this.endDate = moment().endOf('week').format('YYYY-MM-DD'),
    		this.employeeId = this.$route.params.id;
      },
      getDetailInfo(){
        this.$store.dispatch('getTimeReportDetailInfo',{employeeId:this.employeeId,beginDate:this.beginDate,endDate:this.endDate});
      },
      getDetailList(){
        this.$store.dispatch('getTimeReportDetailList',{employeeId:this.employeeId,beginDate:this.beginDate,endDate:this.endDate});
      },
      setChart(){
        this.pieChart = echarts.init(document.getElementById('pieChart'));
        this.pieChart.setOption(this.pieChartOption);
      },
      toLeftWeek(){
        this.beginDate = moment(this.beginDate).subtract(1,'week');
        this.endDate = moment(this.endDate).subtract(1,'week');
      },
      toRightWeek(){
        this.beginDate = moment(this.beginDate).add(1,'week');
        this.endDate = moment(this.endDate).add(1,'week');
      },
      saveTimesheet(){

      },
      cancelSaveTimesheet(){

      }
    }
	}
</script>


<style rel="stylesheet/scss" type="text/css" lang="scss">
	@import "src/assets/css/variable.scss";

	#timeReportDetail {
    >.content{
      .chart-info{
        .chart{
          height: 300px;
          padding: 0 30px;
        }
        .table{
          padding: 30px;
          .info-header{
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            color: #325570;
            border: 1px $baseBorderColor solid;
            border-bottom:0 ;
            background: #F2F9FF;
          }
          .info-table{
            width: 100%;
            border-right: 1px $baseBorderColor solid;
            td{
              font-size: 14px;
              color: #335570;
              width: 173px;
              height: 48px;
              line-height: 48px;
              padding: 4px;
              text-align: center;
              vertical-align: middle;
              border-bottom: 1px $baseBorderColor solid ;
              border-left: 1px $baseBorderColor solid ;
            }
          }
        }
      }
      /*==================table*/
      .table-content{
        .handle-content{
          margin-bottom: 14px;
          .add-btn{
            width: 140px;
            height: 34px;
            font-size: 12px;
            color: #FFFFFF;
            background: $baseColor;
            border-radius: 2px;
            border: 0;
            outline: 0;
            cursor: pointer;
            &:hover{
              opacity: .7;
            }
          }
        }
        .table-header{
          height: 50px;
          line-height: 50px;
          border: 1px $baseBorderColor solid;
          border-bottom: 0;
          font-size: 24px;
          color: $baseColor;
          text-align: center;
          .left-icon,.right-icon{
            margin: 0 20px;
            font-size: 12px;
            padding: 4px;
            vertical-align: middle;
            border: 1px $baseBorderColor solid;
            border-radius: 2px;
            &:hover{
              opacity: .5;
            }
          }
        }
        .table-panel{
          .detail-date-column{
            position: relative;
            .date-name.line:after{
              content:'';
              position: absolute;
              left: 0;
              top:0;
              width:1159px;
              height: 10px;
              background: #F2F9FF;
            }
          }
        }
      }
    }
    /*add timeSheet*/
    .addModal{
      margin: 140px auto 20px auto;
      .ivu-modal{
        top: 0;
        height: 500px;
        font-size: 14px;
        color: #325570;
        .ivu-modal-header{
          border: 0;
          padding: 40px 90px !important;
          .ivu-modal-header-inner{
            font-size: 20px;
            color: #325570;
            font-weight: normal;
          }
        }
        .ivu-modal-body{
          font-size: 14px;
          color: #335570;
          padding: 0 90px;
          .addForm{
            margin-bottom: 50px;
            .ivu-form-item-label{
              font-size: 14px;
              color: #335570;
            }
          }
        }
        .ivu-modal-footer{
          border: 0;
          text-align: center;
          line-height: 100px;
          .ivu-btn{
            width: 100px;
            height: 38px;
            font-size: 16px;
            border: 1px $baseBorderColor solid;
            margin: 10px;
          }
        }
      }
    }
	}
</style>
